<!--
 * @Author       : 梁嘉琳
 * @Date         : 2022-05-27 11:11:29
 * @LastEditors  : 梁嘉琳
 * @LastEditTime : 2022-07-13 14:10:36
 * @FilePath     : \web3d\my\examples\gradualCube.html
-->
<!DOCTYPE html>
<html lang="zh">
	<head>
		<title>旋转立方体-BoxGeometry</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
		<link rel="icon" href="../favicon.ico" />
		<link type="text/css" rel="stylesheet" href="../public/main.css" />
	</head>
	<body>
		<!-- <canvas id="fireflx"></canvas> -->
		<div id="fireflx"></div>

		<script type="importmap">
			{
				"imports": {
					"three": "../node_modules/three/build/three.module.js",
					"three/": "../node_modules/three/",
					"public/": "../public/"
				}
			}
		</script>

		<script type="module">
			import * as THREE from 'three';
			import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
			import { resizeRendererToDisplaySize } from 'public/resizeHandle.js';
			import { Lut } from 'three/examples/jsm/math/Lut.js';

			const canvas = document.querySelector('#fireflx');
			let perpCamera, orthoCamera, renderer, lut;
			let mesh, sprite;
			let scene, uiScene, params;

			const h = window.innerHeight;
			const w = window.innerWidth;
			const k = w / h;

			lut = new Lut();

			scene = new THREE.Scene();
			scene.background = new THREE.Color(0xffffff);

			renderer = new THREE.WebGLRenderer({ antialias: true });
			renderer.setPixelRatio(window.devicePixelRatio === 1 ? 2 : window.devicePixelRatio);
			renderer.setSize(w, h);
			canvas.appendChild(renderer.domElement);

			perpCamera = new THREE.PerspectiveCamera(60, k, 0.1, 1000);
			perpCamera.position.set(0, 0, 100);

			const pointLight = new THREE.PointLight(0xffffff, 1);
			perpCamera.add(pointLight);
			scene.add(perpCamera);

			let geometry = new THREE.BufferGeometry();
			geometry.setAttribute(
				'position',
				new THREE.BufferAttribute(
					new Float32Array([
						0,
						0,
						0, //顶点1坐标
						50,
						0,
						0, //顶点2坐标
						50,
						50,
						0, //顶点3坐标
						0,
						50,
						0, //顶点4坐标
						0,
						50,
						50, //顶点5坐标
						0,
						0,
						50, //顶点6坐标
						50,
						0,
						50, //顶点7坐标
						50,
						50,
						50, //顶点8坐标
					]),
					3
				)
			);
			const indices = [];
			indices.push(
				0,
				2,
				1,
				0,
				2,
				3,

				3,
				4,
				5,

				0,
				3,
				5,

				0,
				1,
				6,

				0,
				5,
				6,
				1,
				2,
				6,
				2,
				6,
				7,
				2,
				3,
				7,
				3,
				4,
				7,
				4,
				5,
				6,
				4,
				7,
				6
			);
			geometry.setIndex(indices);
			geometry.setIndex(indices);

			const array = [
				1,
				1,
				1, //顶点1颜色

				1,
				0,
				1, //顶点2颜色

				1,
				0,
				0, //顶点3颜色

				1,
				1,
				0, //顶点4颜色

				0,
				1,
				0, //顶点5颜色

				0,
				0,
				1, //顶点7颜色

				0,
				1,
				1, //顶点6颜色

				0,
				0,
				0, //顶点8颜色
			];
			geometry.center();
			geometry.computeVertexNormals();

			const colors = [];
			for (let i = 0, n = geometry.attributes.position.count; i < n; ++i) {
				const j = 3 * i;
				colors.push(array[j], array[j + 1], array[j + 2]);
				// colors.push(1, 1, 1);
			}

			geometry.setAttribute('color', new THREE.Float32BufferAttribute(colors, 3));

			mesh = new THREE.Mesh(
				geometry,
				new THREE.PointsMaterial({
					side: THREE.DoubleSide, // 双面渲染，否则旋转到某个角度有些面就看不到了，默认单面渲染
					vertexColors: true, //以顶点颜色为准
				})
			);
			scene.add(mesh);

			const controls = new OrbitControls(perpCamera, renderer.domElement);

			function animate() {
				requestAnimationFrame(animate);
				renderer.render(scene, perpCamera);
			}
			animate();
		</script>
	</body>
</html>
